<template>
	<view class="emotion-box">
		<swiper class="screen-swiper" disable-programmatic-animation="true" indicator-dots="true">
			<swiper-item class="emotion-box-line" v-for="(page, a) in list" v-bind:key="a">
				<!-- 不带边框并矩形显示 -->
				<uni-grid :column="8" :show-border="false" :square="false">
					<uni-grid-item style="height: auto;"  v-for="(emoji, i) in page" v-bind:key="i">
						<view @tap="clickHandler(emoji)" :style="style">
							<image :lazy-load="true" mode="aspectFit" style="width: 50upx; height: 50upx;" :src="getUrl(emoji)"/>
						</view>
					</uni-grid-item>
				</uni-grid>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
export default {
	components: { uniGrid, uniGridItem },
	props: {},
	data() {
		return {
			// 画矩阵
			list: this.GLOBAL.emojiList,
			style: `width: ${this.GLOBAL.sysParams.windowWidth/8-5}px; padding-left: 40upx`
		};
	},
	mounted() {
	},
	methods: {
		clickHandler(emoji) {
			this.$emit('emotion', emoji);
		},
		getUrl(emoji){
			return `${this.$store.state.imgUrl}/emoji/${emoji.url}`
		}
	}
};
</script>

<style scoped>
.emotion-box {
	height: 400upx;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding-top: 8upx;
	overflow: hidden;
	background: white;
}

.emotion-box-line {
	display: flex;
}

.emotion-item {
	flex: 1;
	text-align: center;
	cursor: pointer;
	padding: 12upx 40upx;
}
</style>
